<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" media="all"/>
  		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>

		<!--<link rel="stylesheet" type="text/css" href="p" />
		<script src="js/layui.all.js" type="text/javascript" charset="utf-8"></script>-->
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>

	<body>

		<div class="">
			<table class="layui-hide" id="test" lay-filter="test"></table>
		</div>
		<!--头部数据-->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				
				<button class="layui-btn layui-btn-sm" onclick="add()">添加商品类型</button>
			</div>
		</script>
		<!--end-->
		<!--行选择框-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<!--END-->

		<script>
			layui.use('table', function() {
				var table = layui.table;

				table.render({
					elem: '#test',
					url: '../dataset/goodsType.json',
					toolbar: '#toolbarDemo',
					title: '商品类型展示',
					cols: [
						[{
							field: 'id',
							width: 130,
							title: '商品类型id',
							sort: true
						}, {
							field: 'goodTypeName',
							edit: 'text',
							title: '商品类型名称'
						}, {
							field: 'parentId',
							edit: 'text',
							title: '商品父id',
							sort: true
						}, {
							field: 'do',
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					page: true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch(obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
							var data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					//console.log(obj)
					if(obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
						});
					} else if(obj.event === 'edit') {
						layer.prompt({
							formType: 2,
							value: data.vip_deposit
						}, function(value, index) {
							obj.update({
								vip_deposit: value
							});
							layer.close(index);
						});
					}
				});
			});
		

			function add() {
				layui.use('layer', function() {
					var layer = layui.layer;

					layer.open({
						type: 2,
						content: 'addGoodsType.html',
						area: ['700px', '430px']
					});
				});
			}
		</script>

	</body>

</html>